<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">客户详情</p>
    </div>
    <div class="view-container">
      <el-row class="status-title">
        <el-col class="mr20 width100" v-if="userDetailData.approvalStatus == 1">
            <el-button
                class="btn-default width100"
                type="primary"
                @click="userAudit()"
                v-hasPermi="['system:customerInformation:check']"
            >审核</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="userDetailData.approvalStatus == 2">
            <el-button
                class="btn-audit width100"
                type="primary"
                @click="userReverseAudit()"
                v-hasPermi="['system:customerInformation:uncheck']"
            >反审核</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="userDetailData.approvalStatus == 0 || userDetailData.approvalStatus == 3">
            <el-button
                class="btn-default width100"
                type="primary"
                @click="userEdit()"
                v-hasPermi="['system:customerInformation:update']"
            >编辑</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="userDetailData.approvalStatus == 0">
            <el-button
                class="btn-delete width100"
                type="primary"
                @click="userDelete()"
                v-hasPermi="['system:customerInformation:deleteById']"
            >删除</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="userDetailData.status == 0 && userDetailData.approvalStatus == 2">
            <el-button
                class="btn-enable width100"
                type="primary"
                @click="userEnable()"
                v-hasPermi="['system:customerInformation:disable']"
            >启用</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="userDetailData.status == 1 && userDetailData.approvalStatus == 2">
            <el-button
                class="btn-delete width100"
                type="primary"
                @click="userDisable()"
                v-hasPermi="['system:customerInformation:disable']"
            >禁用</el-button>
        </el-col>
        <el-col :span="10" class="status-container">
          <div class="status-item">
            <span :class="{ 'active' : userDetailData.approvalStatus == 0 }">草稿</span>
            <span :class="{ 'active' : userDetailData.approvalStatus == 1 }">待审核</span>
            <span :class="{ 'active' : userDetailData.approvalStatus == 2 }">已审核</span>
            <span :class="{ 'active' : userDetailData.approvalStatus == 3 }">拒绝</span>
          </div>
        </el-col>
      </el-row>
      <ul class="tabs mt30">
        <li @click="current = 0" :class="{ active: current === 0 }">基础资料</li>
        <li @click="current = 1" :class="{ active: current === 1 }">证件管理</li>
        <li @click="current = 2" :class="{ active: current === 2 }">开票信息</li>
      </ul>
      <div v-show="current === 0">
        <el-row class="detail-item">
          <el-col :span="8">
              <span>客户代码：</span>{{ userDetailData.code ?  userDetailData.code : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>客户全称：</span>{{ userDetailData.name ?  userDetailData.name : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>英文名称：</span>{{ userDetailData.englishName ?  userDetailData.englishName : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>客户简称：</span>{{ userDetailData.abbreviation ?  userDetailData.abbreviation : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>组织机构代码：</span>{{ userDetailData.agencyCode ?  userDetailData.agencyCode : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>法人：</span>{{ userDetailData.legalPerson ?  userDetailData.legalPerson : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>联系人：</span>{{ userDetailData.contact ?  userDetailData.contact : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>联系电话：</span>{{ userDetailData.contactNumber ?  userDetailData.contactNumber : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>电子邮箱：</span>{{ userDetailData.mail ?  userDetailData.mail : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>销售区域：</span>{{ userDetailData.salesArea ?  userDetailData.salesArea : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>客户分类：</span>{{ userDetailData.customerSortId ?  userDetailData.customerSortId : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>行业类型：</span>{{ userDetailData.industryType ?  userDetailData.industryType : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>币种：</span>{{ userDetailData.currency ?  userDetailData.currency : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>客户来源：</span>{{ userDetailData.customerSource ?  userDetailData.customerSource : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>销售员：</span>{{ userDetailData.seller ?  userDetailData.seller : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>价格清单：</span>{{ userDetailData.priceList ?  userDetailData.priceList : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>运输方式：</span>{{ userDetailData.transport ?  userDetailData.transport : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>付款条件：</span>{{ userDetailData.paymentTerms ?  userDetailData.paymentTerms : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
            <span>收货人：</span>{{ userDetailData.consignee ?  userDetailData.consignee : '暂无'}}
          </el-col>
          <el-col :span="16">
            <span>收货地址：</span>{{ userDetailData.province ?  userDetailData.province + userDetailData.city + userDetailData.region + userDetailData.shippingAddress : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>状态：</span>
              <!-- {{ userDetailData.status == '1' ?  '正常' : '禁用'}} -->
              <font v-if="userDetailData.status == 0" style="color:#fd562c">禁用</font>
              <font v-if="userDetailData.status == 1" style="color:#52C41A">正常</font>
          </el-col>
        </el-row>
      </div>
      <div v-show="current === 1">
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">营业执照</div>
            <div class="avatar-uploader">
              <div v-if="typeList1">
                <img v-if="typeList1.fileType == '.jpg' || typeList1.fileType == '.png' || typeList1.fileType == '.gif' || typeList1.fileType == '.bmp' || typeList1.fileType == 'jpeg'" :src="typeList1.fileUrl" class="avatar">
                <span v-else>{{ typeList1.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList1.startTime ? typeList1.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList1.endTime ? typeList1.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">年度报告</div>
            <div class="avatar-uploader">
              <div v-if="typeList2">
                <img v-if="typeList2.fileType == '.jpg' || typeList2.fileType == '.png' || typeList2.fileType == '.gif' || typeList2.fileType == '.bmp' || typeList2.fileType == 'jpeg'" :src="typeList2.fileUrl" class="avatar">
                <span v-else>{{ typeList2.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList2.startTime ? typeList2.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList2.endTime ? typeList2.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">医疗器械经营许可证</div>
            <div class="avatar-uploader">
              <div v-if="typeList3">
                <img v-if="typeList3.fileType == '.jpg' || typeList3.fileType == '.png' || typeList3.fileType == '.gif' || typeList3.fileType == '.bmp' || typeList3.fileType == 'jpeg'" :src="typeList3.fileUrl" class="avatar">
                <span v-else>{{ typeList3.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList3.startTime ? typeList3.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList3.endTime ? typeList3.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">质量保证协议</div>
            <div class="avatar-uploader">
              <div v-if="typeList4">
                <img v-if="typeList4.fileType == '.jpg' || typeList4.fileType == '.png' || typeList4.fileType == '.gif' || typeList4.fileType == '.bmp' || typeList4.fileType == 'jpeg'" :src="typeList4.fileUrl" class="avatar">
                <span v-else>{{ typeList4.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList4.startTime ? typeList4.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList4.endTime ? typeList4.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
      </div>
      <div v-show="current === 2">
         <el-row class="detail-item">
          <el-col :span="8">
            <span>公司名称（中文）：</span>{{ customerInformationInvoice.name ?  customerInformationInvoice.name : '暂无'}}
          </el-col>
          <el-col :span="8">
            <span>公司名称（英文）：</span>{{ customerInformationInvoice.enName ?  customerInformationInvoice.enName : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="24">
            <span>公司注册地址：</span>{{ customerInformationInvoice.registeredAddressCountry ?  customerInformationInvoice.registeredAddressCountry : '暂无'}}{{ customerInformationInvoice.registeredAddressProvince ? customerInformationInvoice.registeredAddressProvince : '' }}{{ customerInformationInvoice.registeredAddressCity ? customerInformationInvoice.registeredAddressCity : '' }}{{ customerInformationInvoice.registeredAddressRegion ? customerInformationInvoice.registeredAddressRegion : '' }}{{ customerInformationInvoice.registeredAddressDetailed ? customerInformationInvoice.registeredAddressDetailed : '' }}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="24">
            <span>纳税人类型：</span>{{ customerInformationInvoice.taxpayerType == '0' ? '增值税一般纳税人' : customerInformationInvoice.taxpayerType == '1' ? '增值税小规模纳税人' : customerInformationInvoice.taxpayerType == '2' ? '营业纳税人' : '暂无' }}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="24">
            <span>纳税类型比例：</span>{{ customerInformationInvoice.taxpayerScale == '0' ? '13%' : customerInformationInvoice.taxpayerScale == '1' ? '9%' : customerInformationInvoice.taxpayerScale == '2' ? '6%' : customerInformationInvoice.taxpayerScale == '3' ? '3%' : customerInformationInvoice.taxpayerScale == '4' ? '1%' : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>电话：</span>{{ customerInformationInvoice.phone ?  customerInformationInvoice.phone : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>传真：</span>{{ customerInformationInvoice.fax ?  customerInformationInvoice.fax : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>美元开户银行名称：</span>{{ customerInformationInvoice.usBankAccountName ?  customerInformationInvoice.usBankAccountName : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>美元开户银行账号：</span>{{ customerInformationInvoice.usBankAccount ?  customerInformationInvoice.usBankAccount : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>开户银行名称：</span>{{ customerInformationInvoice.cnBankAccountName ?  customerInformationInvoice.cnBankAccountName : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>开户银行账号：</span>{{ customerInformationInvoice.cnBankAccount ?  customerInformationInvoice.cnBankAccount : '暂无'}}
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 审核/反审核 -->
    <el-dialog :visible.sync="open" width="500" top="100px" append-to-body title="审核意见" center>
      <el-row>
        <el-col :span="24">
          <textarea
            class="approve-textarea"
            v-model="approveRemark"
            type="textarea"
            placeholder="请输入意见和看法"
          >
          </textarea>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="btn-success mr20 width100"
          @click="agreeApprove()"
        >同意</el-button>
        <el-button
          type="primary"
          class="btn-cancel width100"
          @click="disagreeApprove()"
        >拒绝</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detailUser, deleteUser, approveUser, unApproveUser, enableUser } from "@/api/system/basedata/user/user"
import { listSalesArea } from "@/api/system/basedata/salesarea/salesarea"
import { listUserList } from "@/api/system/basedata/userlist/userlist"
export default {
  name: "userDetail",
  data(){
    return {
      id: '',
      userDetailData: '',
      customerInformationInvoice: '',
      customerInformationFileList: [],
      current: 0,
      open: false,
      approveRemark: '',
      typeList1: {},
      typeList2: {},
      typeList3: {},
      typeList4: {},
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetailData()
  },
  methods: {
    // 获取详情信息
    getDetailData() {
      detailUser(this.id).then(res => {
        this.userDetailData = res.data
        this.customerInformationFileList = res.data.customerInformationFileList == null ? [] : res.data.customerInformationFileList
        this.customerInformationInvoice = res.data.customerInformationInvoice == null ? '' : res.data.customerInformationInvoice
        this.getDetailUpload()
        this.getSalesArea()
        this.getUserList()
      })
    },
    // 转换上传图片
    getDetailUpload(){
      let arr1 = this.customerInformationFileList.find((item) => {
        return item.type == 1
      })
      let arr2 = this.customerInformationFileList.find((item) => {
        return item.type == 2
      })
      let arr3 = this.customerInformationFileList.find((item) => {
        return item.type == 3
      })
      let arr4 = this.customerInformationFileList.find((item) => {
        return item.type == 4
      })
      this.typeList1 = arr1 == undefined ? '' : arr1
      this.typeList2 = arr2 == undefined ? '' : arr2
      this.typeList3 = arr3 == undefined ? '' : arr3
      this.typeList4 = arr4 == undefined ? '' : arr4
    },
    // 获取销售区域
    getSalesArea(){
      listSalesArea().then(res => {
        let arr = res.rows.find(item =>{
          return item.areaId == this.userDetailData.salesArea
        })
        if(arr != undefined){
          this.userDetailData.salesArea = arr.areaName
        }
      })
    },
    // 获取客户分类
    getUserList() {
      listUserList().then(res => {
        let arr = res.data.find(item => {
          return item.sortId == this.userDetailData.customerSortId
        })
        if(arr != undefined){
          this.userDetailData.customerSortId = arr.sortName
        }
      })
    },
    // 审核
    userAudit(){
      this.open = true
    },
    // 反审核
    userReverseAudit(){
      this.$modal.confirm('是否确认反审核？', '反审核').then(() => {
        unApproveUser(this.id, 0).then(res => {
          // console.log(res)
          if(res.code == 200){
            this.getDetailData()
            this.$modal.msgSuccess("操作成功")
          }
        })
      }).catch(() => {})
    },
    agreeApprove(){
        approveUser(this.id, 2, this.approveRemark).then(res => {
            // console.log(res)
            if(res.code == 200){
                this.getDetailData()
                this.open = false
                this.$modal.msgSuccess("操作成功")
            }
        })
    },
    disagreeApprove(){
        approveUser(this.id, 3, this.approveRemark).then(res => {
            if(res.code == 200){
                this.getDetailData()
                this.open = false
                this.$modal.msgSuccess("操作成功")
            }
        })
    },
    // 编辑
    userEdit(){
      // this.$router.push({path:"/basedata/user/edit",query:{id: this.id}})
      this.$tab.closeOpenPage({ path: "/basedata/user/edit", query:{id: this.id} })
    },
    // 启用
    userEnable(){
      this.$modal.confirm('是否确认启用？', '启用').then(() => {
        enableUser(this.id, 1).then(res => {
          if(res.code == 200){
            this.$modal.msgSuccess("启用成功")
            this.getDetailData()
          }
        })
      }).catch(() => {})
    },
    // 禁用
    userDisable(){
      this.$modal.confirm('是否确认禁用？', '禁用').then(() => {
        enableUser(this.id, 0).then(res => {
          if(res.code == 200){
            this.$modal.msgSuccess("禁用成功")
            this.getDetailData()
          }
        })
      }).catch(() => {})
    },
    // 删除
    userDelete() {
      this.$modal.confirm('是否确认删除当前数据？', '删除').then(() => {
        deleteUser(this.id).then(res => {
          if(res.code == 200){
            this.$modal.msgSuccess("删除成功")
            this.$tab.closeOpenPage({ path: "/basedata/user/list" })
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.upload-title{
  width: 140px;
  padding-right: 10px;
  color: #606266;
  font-size: 14px;
  font-weight: bold;
  text-align: right;
}
.avatar-uploader{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  width: 178px;
  height: 178px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
}
.avatar {
  width: 178px;
  display: block;
}
</style>